<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title" v-if="access!=='kinsfolk'">
				<template v-if="type=='add'">
					新建菜色
				</template>
				<template v-if="type=='edit'">
					编辑菜色
				</template>
			</div>
		</my-header>
		<div class="cont-nof" style="background: #F5F5F5;">
			<div class="search-cell flex">
				<div class="search-item tl" style="text-align-last:auto;">菜色</div>
				<div class="search-box">
					<input class="search-input" type="text" placeholder="请输入菜色名" v-model="parmas.name">
				</div>
			</div>
			<div class="upload_box">
				<upload-file ref="upload" :type="'image'" :max="1" :list="parmas.imageList"></upload-file>
			</div>
			<div class="add_btn" @click="submit">
				确定
			</div>
		</div>
	</div>
</template>

<script>
	import uploadFile from '@/components/uploadFile.vue';

	export default {
		components: {
			uploadFile
		},
		data() {
			return {
				type: 'add',
				access: this.$Cookies.get('loginType'),
				parmas: {
					name: '',
					imageList: [],
				}
			}
		},
		methods: {
			submit() {
				let imgList = this.$refs.upload.getUpList();
				if (imgList.length <= 0) {
					this.$weui.topTips('请上传食谱图片');
					return
				}
				this.parmas.imageList = imgList;
				this.$http.createFood(this.parmas).then(resp => {
					if (this.type == 'add') {
						history.go(-1);
					} else {
						history.go(-2);
					}

				})
			}
		},
		created() {
			if (this.$route.query.type == 'edit') {
				this.type = this.$route.query.type;
				this.parmas = this.$route.query.data;
			}
		}
	}
</script>

<style scoped>
	.upload_box {
		width: calc(100% - 2rem);
		height: calc(100% - 15rem);
		margin: 1.5rem auto;
	}

	.add_btn {
		width: 16rem;
		height: 4rem;
		line-height: 4rem;
		border-radius: 4px;
		background-color: rgba(54, 193, 45, 1);
		font-size: 1.6rem;
		margin: auto;
		color: #FFFFFF;
	}
</style>
